<template>
  <div id="createTouch">
    <el-dialog
      title="编辑发奖管理"
      :visible.sync="dialogData.isShow"
      width="550px"
      :before-close="labelHandleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        label-position="right"
      >
        <el-form-item label="发放状态" prop="state">
          <el-select v-model="ruleForm.state" placeholder="请选择发放状态">
            <el-option
              v-for="item in issuedStatusList"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
              clearable
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label="收 件 人">
          <el-input
            v-model.trim="ruleForm.name"
            maxlength="10"
            show-word-limit
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input
            v-model.trim="ruleForm.phone"
            maxlength="11"
            show-word-limit
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="particularAddress">
          <el-input
            v-model.trim="ruleForm.particularAddress"
            maxlength="60"
            show-word-limit
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="物流信息" prop="courierCompany">
          <el-input
            v-model.trim="ruleForm.courierCompany"
            maxlength="60"
            show-word-limit
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="物流单号" prop="trackingNumber">
          <el-input
            v-model.trim="ruleForm.trackingNumber"
            maxlength="60"
            show-word-limit
            placeholder=""
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">
          取 消
        </el-button>
        <el-button
          type="success"
          :loading="loading"
          @click.prevent="confirmLabel('ruleForm')"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { awardlogistics } from '@component/activeManagement/common/js/lableApi' // 导入公用方法
import { validateSpecial } from '@utils/validate'
export default {
  name: 'CreateTouch',
  msg: '发奖管理-编辑弹窗',
  props: ['dialogData'],
  data() {
    // 收件人校验
    var validateName = (rule, value, callback) => {
      if (!validateSpecial(value)) {
        callback(new Error('收件人名称不能包含特殊字符'))
      }
      callback()
    }
    return {
      loading: false,
      id: null,
      ruleForm: {
        state: '', // 发放状态
        name: '', // 收件人
        phone: '', // 联系方式
        particularAddress: '', // 详细地址
        courierCompany: '', // 物流信息
        trackingNumber: '' // 物流单号
      },
      rules: {
        state: { required: true, message: '发放状态不能为空', trigger: 'blur' }, // 发放状态
        name: [{ validator: validateName, trigger: 'blur' }], // 收件人
        phone: [
          {
            pattern: /^1\d{10}$/,
            message: '请输入1开头的11位手机号码',
            trigger: 'blur'
          }
        ], // 联系方式
        particularAddress: [], // 详细地址
        courierCompany: [], // 物流信息
        trackingNumber: []
      },
      // 发放状态
      issuedStatusList: [{ dictLabel: '全部', dictValue: '' }]
    }
  },
  mounted() {
    this.id = this.dialogData.params.id
    this.ruleForm.state = this.dialogData.params.state
    this.ruleForm.name = this.dialogData.params.name
    this.ruleForm.phone = this.dialogData.params.phone
    this.ruleForm.courierCompany = this.dialogData.params.courierCompany
    this.ruleForm.trackingNumber = this.dialogData.params.trackingNumber
    this.ruleForm.particularAddress = this.dialogData.params.particularAddress
    this.prizeType = this.dialogData.params.prizeType
    if (this.prizeType === 'ENTITY') {
      this.rules.name.push({
        required: true,
        message: '收件人不能为空',
        trigger: 'blur'
      })
      this.rules.phone.push({
        required: true,
        message: '联系方式不能为空',
        trigger: 'blur'
      })
      this.rules.particularAddress.push({
        required: true,
        message: '详细地址不能为空',
        trigger: 'blur'
      })
      this.rules.courierCompany.push({
        required: true,
        message: '物流信息不能为空',
        trigger: 'blur'
      })
      this.rules.trackingNumber.push({
        required: true,
        message: '物流单号不能为空',
        trigger: 'blur'
      })
    }
    this.getStatusList()
  },
  methods: {
    // /* 获取奖品类型 */
    async getStatusList() {
      /*获取发放状态 */
      let issuedStatus = await sysNormalDisable('issued_status')
      this.issuedStatusList = this.issuedStatusList.concat(issuedStatus)
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    // 取消
    cancelLabel() {
      this.loading = false
      this.id = null
      this.dialogData.params = null
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let obj = {
            addLogisticsDto: {
              issuanceRecordId: this.id,
              courierCompany: this.ruleForm.courierCompany,
              trackingNumber: this.ruleForm.trackingNumber,
              message: ''
            },
            address: {
              name: this.ruleForm.name,
              phone: this.ruleForm.phone,
              particularAddress: this.ruleForm.particularAddress
            },
            state: this.ruleForm.state
          }
          awardlogistics(
            obj,
            (response) => {
              this.$emit('refresh')
              this.cancelLabel()
              this.loading = false
            },
            (response) => {
              this.loading = false
              this.$message({
                message: '修改失败,' + response.message,
                type: 'warning'
              })
            }
          )
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less">
#createTouch {
  .tip {
    font-size: 18px;
    color: #f00;
    font-weight: bold;
  }
}
</style>
